<template>
    <div class="user-race" @click="toRace">
        <img v-lazy="props.imgUrl ? imgUrl : require('../assets/图片1.png')" alt="">
        <div>
            <p class="vtitle">{{ props.name ? props.name : "默认标题" }}</p>
            <p class="pubdate">
                <span class="publisher"> {{ props.publisher ? props.publisher : "默认发布者" }}</span>
                <span class="date"> {{ props.start_time ? props.start_time : "xxxx-x-x" }}</span>
            </p>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const props = defineProps(['imgUrl', 'name', 'publisher', 'start_time', 'raceId']);
const router = useRouter()

const toRace = () => {
    router.push('/race-detail/' + props.raceId)
}


</script>

<style lang="scss">
.user-race {
    width: 210px;
    height: 160px;
    border-radius: 5px;
    background-color: white;
    // border: 1px solid rgb(236, 234, 234);
    box-shadow: 0 0 10px #ccc;
    // padding: 5px !important;

    &:hover {
        cursor: pointer;
        transform: scale(1.01);
        box-shadow: var(--shadow-2);
    }

    .vtitle {
        font-weight: 600;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis; // 用省略号来代表被隐藏掉的文本
        white-space: nowrap; // 强制文本在一行显示
        margin: 0 10px;

    }

    .pubdate {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        margin: 10px 10px 0 10px;

        .publisher {
            overflow: hidden;
            text-overflow: ellipsis; // 用省略号来代表被隐藏掉的文本
            white-space: nowrap;
        }

        .date {
            color: #ccc;
            white-space: nowrap;
        }
    }

    img {
        width: 100%;
        height: 100px;
        border-radius: 5px;
    }
}
</style>